<template>
  <div style="padding: 10px;background-color: beige;">
    <h2>Parent组件</h2>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>

    <ChildDemo
        my-name="小蜜蜂"
        my-age="2"
        @myEvent="myEvent"
    >
      <template v-slot:title>
        <p>插槽内容</p>
      </template>
    </ChildDemo>
  </div>
</template>

<script>
import {ref} from 'vue'
import ChildDemo from './ChildDemo.vue'

export default {
  name: "ParentDemo",
  components: {
    ChildDemo
  },

  beforeCreate() {
    console.log("beforeCreate...")
  },

  // setup 在组件创建之前执行，此时还没有this
  setup(props) {
    const name = ref('旅行网')
    const age = ref(10)

    // 没有this，输出undefined
    console.log("setup...")
    console.log("this is ", this)

    // 子组件自定义事件
    const myEvent = (str) => {
      alert("子组件调用了," + str)
    }

    return {
      name,
      age,
      myEvent
    }
  }
}
</script>

<style scoped>

</style>